<template>
  <div class="list-wrapper" style="margin-top: 20px">
    <el-table :data="list" style="width: 100%" :height="height">
      <el-table-column prop="name" label="商品信息" width="400">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" class="secTitle">
            <p>订单号:{{ scope.row.order_no }}</p>
            <p style="margin-left: 5px">下单时间：{{ scope.row.created_at }}</p>
          </div>
          <div v-else class="secTitle">
            <el-avatar :size="50" :src="scope.row.img_show" shape="square" />
            <div class="text">
              <p>{{ scope.row.name }}</p>
              <p>{{ '单价：' + scope.row.price + '￥' }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pay" label="实付款" width>
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>{{ scope.row.payment }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="assistant" label="下单人：" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <div class="shop-wrapper">
              <el-avatar :size="50" :src="scope.row.avatar" shape="square" />
              <span>{{ scope.row.realname }}</span>
            </div>
            <p style="white-space: nowrap">{{ '收货人：' + scope.row.realname + ' / ' + scope.row.mobile }}</p>
            <p>{{ scope.row.city_str + '  ' + scope.row.detail }}</p>
            <p>备注：{{ scope.row.message }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单备注:" width="200">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else>
            <span style="padding: 0 15px; color: #409EFF; cursor: pointer;" @click="viewRemark(scope)">备注</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div v-if="showSecTitle(scope.$index)" />
          <div v-else style="padding: 0 58px">
            <div class="d-flex">
              <span v-if="scope.row.order_status === 2" style="padding: 0 20px; color: #409EFF;" @click="deliverClick(scope)">发货</span>
              <span v-if="showAmend(scope)" style="padding: 0 20px; color: #409EFF;" @click="amendStatusClick(scope)">修改状态</span>
            </div>
            <div class="d-flex">
              <span v-if="scope.row.order_status !== 5" style="padding: 0 20px; color: #F56C6C; white-space: nowrap" @click="closeOrder(scope)">关闭订单</span>
              <span style="padding: 0 20px; color: #1BAAB0;" class="detail" @click="detail(scope)">订单详情</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <order-detail :order-detail="orderDetail" :dialog-visible="dialogVisible" @closeDialog="handleCloseDialog" />
    <Remark ref="remark" :remark="remark" @confirm="handleRemarkConfirm" />
    <Deliver :id="id" ref="deliver" @success="handleSuccess" />
    <AmendOrder ref="amendOrder" :status-name="statusName" @confirm="handleConfirm" />
  </div>
</template>
<script>
import OrderDetail from './orderDetail'
import { getOrderDetail, closeOrder, setRemark, amendOrderStatus } from '@/api/represent'
import Remark from './remark'
import Deliver from './deliver'
import AmendOrder from './amendOrder'
const ERR_OK = 200
export default {
  components: {
    OrderDetail,
    Remark,
    Deliver,
    AmendOrder
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderDetail: {},
      height: 0,
      remark: '',
      id: '',
      statusName: ''
    }
  },
  created() {
    this.initHeight()
  },
  methods: {
    handleConfirm(orderStatus) {
      this._amendOrderStatus({ id: this.id, myType: orderStatus })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    showAmend(scope) {
      if (scope.row.order_status === 4 || scope.row.order_status === 5) {
        return false
      } else {
        return true
      }
    },
    amendStatusClick(scope) {
      this.$refs.amendOrder.show()
      this.id = scope.row.id
      switch (scope.row.order_status) {
        case 2:
          this.statusName = 'delivery'
          break
        case 1:
          this.statusName = 'payment'
          console.log(this.statusName)
          break
        case 3:
          this.statusName = 'receipt'
          console.log(this.statusName)
          break
      }
    },
    closeOrder(scope) {
      this.$confirm('确认关闭订单吗？')
        .then(_ => {
          this._closeOrder(scope.row.id)
            .then(() => {
              this.$emit('success')
            })
            .catch(err => {
              console.lgo(err)
            })
        })
        .catch(_ => {})
    },
    handleRemarkConfirm(remark) {
      this._setRemark({ id: this.id, message: remark })
    },
    handleSuccess() {
      this.$emit('success')
    },
    deliverClick(scope) {
      this.$refs.deliver.show()
      this.id = scope.row.id
    },
    viewRemark(scope) {
      this.$refs.remark.show()
      this.remark = scope.row.message
      this.id = scope.row.id
    },
    detail(scope) {
      console.log(scope)
      this.dialogVisible = true
      this._getOrderDetail(scope.row.id)
    },
    showSecTitle(index) {
      return (index % 2 === 0)
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    _getOrderDetail(id) {
      getOrderDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.orderDetail = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _closeOrder(id) {
      return closeOrder(id)
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success'
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject(err)
        })
    },
    _setRemark({ id, message }) {
      setRemark({ id, message })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _amendOrderStatus({ id, myType }) {
      return amendOrderStatus({ id, myType })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.lgo(err)
          return Promise.reject(err)
        })
    },
    initHeight() {
      this.height = document.body.clientHeight - 350
      window.onresize = () => {
        this.height = document.body.clientHeight - 350
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .detail {
    color: #1baab0;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell {
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .el-avatar {
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row:nth-child(odd) {
  td{
    height: 20px;
    padding: 0;
    background: #FAFAFA;
  }
}
.secTitle{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  p{
    white-space: nowrap;
  }
}
.shop-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-flex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  span{
    display: inline-block;
    width: 120px;
    text-align: left;
  }
}
</style>
